<template>
  <div class="show-people">
    <SearchPopup
      v-show="!!searchValue && isShowSearchPopup"
      :search-loading="searchLoading"
      :search-people="searchPeople"
      @clickSearchPeople="clickSearchPeople"
      @clickCloseSaerch="clickCloseSaerch"
    />
    <!-- 顶部搜索 -->
    <div class="show-people-input">
      <input
        type="text"
        :value="searchValue"
        placeholder="请输入姓名进行搜索"
        oninput="value = value.replace(/\s+/g, '')"
        @focus="focusHandler"
        @input="inputHandler"
      />
      <svg class="pick-icon pick-saerch" aria-hidden="true">
        <use xlink:href="#icon-icon_import_saerch"></use>
      </svg>
      <svg
        v-show="searchValue"
        class="pick-icon pick-saerch-close"
        aria-hidden="true"
        @click="clickCloseSaerch(false)"
      >
        <use xlink:href="#icon-icon_close_nor"></use>
      </svg>
    </div>
    <!-- 常用联系人 为空不展示  -->
    <div v-if="contactsLists.length > 0">
      <Contacts ref="contacts" />
    </div>
    <div class="left-bottom-box">
      <!-- 筛选页面 -->
      <template v-if="!isClassify">
        <div ref="crumbsRef" class="show-people-crumbs">
          <div class="cy-name"> 选择成员 </div>
          <div v-if="!props.appointStates" class="tabs">
            <div :class="tabActive === 0 ? 'active-color' : null" @click="getClickTabs(0)">
              角色
            </div>
            <div :class="tabActive === 1 ? 'active-color' : null" @click="getClickTabs(1)"
              >部门</div
            >
          </div>
        </div>
        <div v-if="tabActive === 0" ref="contentRef" class="show-people-content">
          <!-- 角色 -->
          <RoleList
            ref="roleList"
            :role-lists="props.roleList"
            :height="contactsHeight"
            :tab-active="tabActive"
          ></RoleList>
        </div>
        <div v-if="tabActive === 1" class="show-people-content">
          <!-- 部门 -->
          <ShowList
            ref="showList"
            :data="showListData"
            :height="contactsHeight"
            :tab-active="tabActive"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShowPeople'
};
</script>
<script setup>
import antiShake from '@/utils/antiShake';
import SearchPopup from '../SearchPopup/index.vue';
import Contacts from '../Contacts/index.vue'; // 常用联系人
import RoleList from '../RoleList/index.vue'; // 角色
import ShowList from './ShowList.vue';
import PinyinMatch from 'pinyin-match';
import { pinyin } from 'pinyin-pro';
import store from '@/store';
import {
  onMounted,
  provide,
  defineExpose,
  ref,
  watch,
  defineProps,
  defineEmits,
  nextTick,
  inject,
  computed
} from 'vue';
const tabActive = ref(0); // 角色 部门选中状态值
const contactsLists = inject('contactsListq'); // 常用联系人
const props = defineProps({
  data: {
    // type: Array,
    // default: [],
  },
  appointStates: {
    // 是否是选择指定人员
    type: Boolean,
    default: false
  },
  roleList: {
    // 角色数组
    type: Array,
    default: () => []
  }
});
// 展示数据
const showData = ref(props.data[0]);
// 面包屑组成数组
const crumbsArr = ref([]);
// 面包屑导航实例
const crumbsRef = ref(null);
const contentRef = ref(null);
// 全部人和分组
const allPeople = ref([]); // 所有人
const allGroup = ref([]); // 所有组
const searchPeople = ref([]); // // 检索到的人
const searchGroup = ref([]); // 检索到分组
// 搜索数据
const searchValue = ref('');
// 搜索条件
const searchCriteria = ref(null);
// 是否展示搜索弹窗
const isShowSearchPopup = ref(false);
// 搜索loading
const searchLoading = ref(false);
// 拼音/汉字2个及以上=>拼音模糊搜索  汉字1个=>汉字模糊搜索
const inputHandler = e => {
  let value = e.target.value;
  if (!value) {
    searchValue.value = '';
    searchPeople.value = [];
    searchGroup.value = [];
    return;
  } else {
    searchLoading.value = true;
    searchValue.value = value;
    isShowSearchPopup.value = true;
    let hzLengthReg = /^[\u4e00-\u9fa5]{2,}$/; // 限制>=2个字符之后 开始进行pinying搜索（要不单字也进行拼音搜索搜索出来的太多了）
    if (hzLengthReg.test(value)) {
      value = pinyin(value, { toneType: 'none' });
    }
    antiShake(search, 500, value);
    searchCriteria.value = value;
  }
};
// 部门 组织切换
const getClickTabs = val => {
  tabActive.value = val;
};
// 选中列表
const selectList = inject('selectList');
// 可选择最大人数
const maxCount = inject('maxCount');
// 检索数据
const search = value => {
  searchPeople.value = [];
  searchGroup.value = [];
  allPeople.value?.forEach(t => {
    let matchIndexs = PinyinMatch.match(t.userName, value);
    if (matchIndexs) {
      searchPeople.value.push(t);
    }
  });
  searchLoading.value = false;
  getAllChecked();
  console.log(searchPeople.value);
};
const getAllChecked = () => {
  selectList.value.forEach(item => {
    searchPeople.value.forEach(it => {
      if (it.userId === item.userId) {
        it.disabled = false;
        it.checked = true;
      }
    });
  });
  if (maxCount.value * 1 === selectList.value.length) {
    searchPeople.value.forEach(item => {
      if (!item.checked) item.disabled = true;
    });
  }
  console.log(searchPeople.value);
};
// 获取焦点事件
const focusHandler = () => {
  if (searchValue.value) {
    isShowSearchPopup.value = true;
  }
};
// 清空搜索|关闭弹窗 true关闭弹窗
const clickCloseSaerch = bool => {
  if (bool) {
    isShowSearchPopup.value = false;
  } else {
    searchValue.value = '';
    searchPeople.value = [];
    searchGroup.value = [];
  }
};
// 搜索页面 执行出来所有检索数据
const clickSearchPeople = () => {
  setTimeout(() => {
    searchPeople.value.forEach(it => {
      it.checked = false;
      it.disabled = false;
    });
    getAllChecked();
  });
};
// 是否进入二级分类页面
const isClassify = ref(false);
const contentHeight = ref(360); // 选择人员dom高度
let contactsHeight = ref(0); // dom高度
let height = ref(0); // dom高度
let contacts = ref(null);
let roleList = ref(null);
let showList = ref(null);
onMounted(() => {
  // 开始是常用联系不确定高度 需要计算 后期顶死了  就写个死值固定
  if (store.state.user.contactsList.length > 0) {
    if (store.state.user.contactsList.length <= 3) {
      height.value = 0;
    } else {
      height.value = 41;
    }
  } else {
    if (props.appointStates) {
      // 指定人员 的页面高度
      contentHeight.value = 448;
    } else {
      contentHeight.value = 443;
    }
  }
  allPeople.value = store.state.user.allPeoples; // 所有人
  contactsHeight.value = contentHeight.value - height.value;

  store.commit('user/contactsHeight', contactsHeight.value);
});

// 进入选择页面数据
const showListData = ref(isClassify.value ? {} : props.data[0]);
// 选中tabID
const selectTabId = ref(null);

const getPeople = data => {
  console.log(6666, data);
  setTimeout(() => {
    // 这块需要优化下不需要执行子组件方法也是可以的
    if (store.state.user.contactsList.length > 0) contacts.value.getChecked(); // 没有常用联系人时候不需要执行
    if (tabActive.value === 0) roleList.value.getChecked();
    if (tabActive.value === 1 && data !== 'checkAllPeople') {
      showList.value.getChecked(data);
    }
  });
};
const getShowPeople = data => {
  getPeople(data);
  console.log('ahhahahaha急啊急啊急啊', !!searchValue.value && isShowSearchPopup.value);
  if (!!searchValue.value && isShowSearchPopup.value) {
    searchPeople.value.forEach(it => {
      it.checked = false;
    });
    getAllChecked();
  }
};
provide('getPeople', getPeople);
provide('selectTabId', selectTabId);
provide('searchCriteria', searchCriteria);
provide('crumbsArr', crumbsArr);
defineExpose({
  getShowPeople
});
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}
.show-people {
  position: relative;
  .show-people-input {
    z-index: 1000;
    position: relative;
    margin-bottom: 8px;
    > input {
      width: 500px !important;
      height: 36px;
      background: #ffffff;
      border: 1px solid rgba(186, 191, 197, 0.4);
      border-radius: 4px;
      padding-left: 28px;
      padding-right: 22px;
      &:hover {
        border-color: var(--tj-primary-color);
      }
      &:focus {
        outline: 0;
        border-color: var(--tj-primary-color);
      }
      &::placeholder {
        color: rgba(0, 0, 0, 0.2);
        font-family: PingFang SC, PingFang SC-400 !important;
      }
    }
    .pick-saerch {
      width: 14px;
      height: 14px;
      position: absolute;
      left: 12px;
      top: 11px;
      color: rgba(0, 0, 0, 0.2);
    }
    .pick-saerch-close {
      cursor: pointer;
      width: 14px;
      height: 14px;
      position: absolute;
      right: 20px;
      top: 12px;
    }
  }
  .show-people-crumbs {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    .tabs {
      display: flex;
      width: 122px;
      height: 24px;
      border: 1px solid rgba(186, 191, 197, 0.4);
      border-radius: 4px;
      div {
        padding: 1px 16px;
        font-size: 14px;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
        font-weight: 400;
        cursor: pointer;

        color: rgba(0, 0, 0, 0.6);
        background: #f5f6f7;
      }
      div:hover {
        color: var(--themecolorhover);
      }
      .active-color {
        border-radius: 4px;
        color: var(--themecolor) !important;
        background: #ffffff;
      }
    }
  }
  .show-people-content {
    margin-top: 8px;
    width: 100%;
  }
}
.left-bottom-box {
  border: 1px solid rgba(186, 191, 197, 0.4);
  border-radius: 4px;
  padding: 8px;
  width: 500px;
}
.cy-name {
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-400;
  font-weight: 400;
}
</style>
